<template>
  <div
    class="advanced-linkage-editor"
  >
    <div
      class="rooter"
      @click="openDialog"
    >
      <slot>
        <div>{{ $demoi18n('panel-linkage.mulitValue') }}</div>
        <Helptip>
          <HelpManual link="advancedLinkage" mode="single_link" />
        </Helptip>
        <el-button
          type="primary"
          size="default"
          style="margin-left: 4px"
        >
          <span
            class="rooter_btn_inner"
            :title="$demoi18n('common.advancedLinkageSettings')"
          >{{ $demoi18n('common.advancedLinkageSettings') }}</span>
        </el-button>
      </slot>
    </div>
    <el-dialog
      v-model="dialogVisible"
      :title="$demoi18n('common.advancedLinkageSettings')"
      width="1100px"
      append-to-body
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :class="`${visualThemeClassName} ${xvueNameSpace}`"
      @close="canelDialog()"
    >
      <template #header>{{ $demoi18n('common.advancedLinkageSettings') }}</template>
      <AdvanceLinkageEditorMain
        ref="mainBox"
        :widgetInstanceId="widgetInstanceId"
        :linkage-datas="linkageDatas"
        :config="config"
      />
      <template #footer>
        <span>
          <el-button
            size="default"
            @click="canelDialog()"
          >{{ $demoi18n('btn.cancel') }}</el-button>
          <el-button
            type="primary"
            size="default"
            @click="saveDialog()"
          >
            {{ $demoi18n('btn.confirm') }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import AdvanceLinkageEditorMain from '@/components/common/advanced-linkage/advanced-linkage-editor-main.vue';
import HelpManual from '@/components/common/help-manual/help-manual.vue';
import Helptip from '@/components/common/helptip/helptip.vue';
import { validChildFormsByEl } from '@/utils/util.js';

export default {
  components: { AdvanceLinkageEditorMain, Helptip, HelpManual },
  provide() {
    return {
      addChild: formVm => {
        this.validateForms.push(formVm);
      },
    };
  },
  props: {
    widgetInstanceId: String,
    config: Object,
  },
  data() {
    return {
      xvueNameSpace: process.env.xvueNameSpace, // 给挂载在body下的元素加上主类名
      dialogVisible: false,
      linkageDatas: [],
      validateForms: [],
    };
  },
  watch: {},
  methods: {
    openDialog() {
      const { advancedLinkage = {} } = this.config;
      this.linkageDatas = JSON.parse(JSON.stringify(advancedLinkage.linkageDatas || []));
      this.dialogVisible = true;
    },
    canelDialog() {
      this.dialogVisible = false;
    },
    async saveDialog() {
      const errors = await validChildFormsByEl(this.$refs.mainBox.$el);
      if (errors.length) {
        return;
      }

      const { advancedLinkage = {} } = this.config;
      advancedLinkage.linkageDatas = this.linkageDatas;

      this.config.advancedLinkage = JSON.parse(JSON.stringify(advancedLinkage));
      this.dialogVisible = false;
    },
  },
};
</script>
<style lang="less" scoped>
.advanced-linkage-editor {
  display: inline-flex;
  .rooter {
    .rooter_btn_inner{
      display: block;
      max-width: 120px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
